<template>
    
  <div class="user-container">
    <el-row>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">主页</el-breadcrumb-item>
        <el-breadcrumb-item>系统设置</el-breadcrumb-item>
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      </el-breadcrumb>

    </el-row>
    <el-row >
          <el-form label-width="120px" >
            <el-row>
              <el-col :span="8">  <el-form-item label="用户名">
                   <el-input></el-input>
              </el-form-item></el-col>
              <el-col :span="8">    <el-form-item label="角色"> <el-input></el-input></el-form-item></el-col>
              <el-col :span="8">    <el-form-item>
                <el-button type="primary" class="btn-search">搜索</el-button>
              </el-form-item></el-col>
            </el-row>

          </el-form>

    </el-row>
    <el-row>
      <el-table :data="state.tableData" stripe style="width: 100%">
        <el-table-column prop="username" label="用户名" width="180" />
        <el-table-column prop="role.name" label="角色" width="180" />
        <el-table-column prop="desc" label="备注" />
      </el-table>
      <div class="example-pagination-block">
        <el-pagination layout="prev, pager, next" :total="50" />
      </div>
    </el-row>
    
    
    
  </div>
  
</template>

<script setup>


   import  {reactive} from "vue";

   import  axios from 'axios'

   const state = reactive({
      tableData:[]
   })

     axios({
       url:'http://test/sys/users',
       dataType:'json',
       method:'get'
     }).then((res)=>{
       console.log(res.data);
       state.tableData = res.data;
     })





</script>

<style scoped>

.user-container{
    padding: 10px;
}


.el-row{
    margin-top: 15px;
}

.el-input{
   width: 330px;
}

.el-form {
   width: 100%;
}

.btn-search{
   width: 130px;
}


</style>